<!-- 课程内容 -->
<template>
  <!-- <div>
    <div v-for="i in 100">课程内容</div>
  </div> -->
  <div class="outterbox">
    <div class="totalprogress">
      <div>已完成任务点：40/60</div>
      <div class="progress">
        <el-progress :percentage="40" :stroke-width="20" :text-inside="true" />
        <!-- <el-progress :stroke-width="10" :percentage="70" /> -->
      </div>
      <div>
        <el-button style="margin-left: 1020px;" key="primary" type="primary" round @click="gotoDocdetail(firstKeyword)">
          进入课程学习
        </el-button>
      </div>
    </div>
    <el-tree class="treestyle" ref="eltree" style="max-width: 600px" :data="listdata" :props="defaultProps"
      :accordion="true" :highlight-current="false" :default-expand-all="false" @node-click="handleNodeClick"
      node-key="label" :current-node-key="currentkey">
      <template #default="scope">
        <div class="custom-node demo-progress" :class="{ firstitem: scope.node.data.first == true }">
          <!-- <i
              class="tree-icon"
              :class="{
                  'el-icon-caret-right': !scope.node.expanded,
                  'el-icon-caret-bottom': scope.node.expanded,
                  'el-icon-wlj-yuandian': scope.data.is_leaf === 1
              }"
          /> -->
          <!-- <Notebook v-if="scope.node.data.first == true" class="iconleft" /> -->
          <div v-if="scope.node.data.first == true" class="catalog_num">
            <span><i><em style="font-style: normal">{{ scope.node.data.index
                  }}</em></i></span>
          </div>
          <div v-if="scope.node.data.second == true" class="orangesection" :class="{ orangecolor: tasknum != 0 }">
            <span v-if="tasknum != 0" class="orangefont">{{ scope.node.data.index }}</span>
            <i class="taskpoint" style="left: 1px;font-size: 21px!important;" v-else>&#xe612;</i>
            <span class="bntHoverTips" :class="{ noover: tasknum != 0, over: tasknum == 0 }">{{ tasknum == 0 ? '已完成' :
              `${tasknum}个待完成任务点` }}<i></i></span>
          </div>

          <i class="taskpoint" v-if="scope.node.data.fourth == true && true">&#xe612;</i>
          <i class="taskpoint" style="font-size: 10px!important;"
            v-if="scope.node.data.fourth == true && false">&#xe602;</i>

          <!-- word -->
          <i class="classdocicon" v-if="scope.node.data.w == true">&#xe640;</i>
          <!-- ppt -->
          <i class="classdocicon" v-if="scope.node.data.ppt == true">&#xe643;</i>
          <!-- pdf -->
          <i class="classdocicon" v-if="scope.node.data.pdf == true">&#xe6c3;</i>
          <!-- 教材 -->
          <i class="classdocicon" v-if="scope.node.data.t == true">&#xe67d; </i>
          <!-- 微课 -->
          <i class="classdocicon" v-if="scope.node.data.v == true">&#xe813;</i>
          <!-- 小测 -->
          <i class="classdocicon" v-if="scope.node.data.test == true">&#xe63e;</i>
          <!-- 仿真 -->
          <i class="classdocicon" v-if="scope.node.data.task == true">&#xe615;</i>

          <span class="labelspan" :class="{ nopublish: scope.node.data.status == 0 }">{{ scope.node.label }}</span>
          <div class="progressbox" v-if="scope.node.data.fourth == true">
            <el-progress :percentage="10" />
            <!-- <el-progress :stroke-width="10" :percentage="70" /> -->
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, nextTick, defineProps } from 'vue'

// 导入请求路径
import api from '@/request/api'
// 注入网络请求方法
const axios = inject('axios')

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar, uid } = storeToRefs(user)

import { useRoute, useRouter } from 'vue-router'
import { number } from 'echarts';
// 初始化路由实例
const route = useRoute()
const router = useRouter()

const props = defineProps({
  lessonid: {
    default: 0,
    required: true,
    type: Number
  }
})

// 获取路由参数
const { lessonId } = history.state

const eltree = ref(null)
let currentkey = ref('')

// 记录知识点标签 不可删
let keyLabel = ''
let firstKeyword = {}

// 列表的所有数据
// let listdata = ref([])
let listdata = reactive([])

let tasknum = ref(0)
onMounted(async () => {
  console.log(history.state)

  console.log('props.lessonid', props.lessonid)

  console.log(lessonId)
  await getCourses(lessonId)
})

// 请求课程所有章节知识点列表
async function getCourses(lessonId) {
  let res = await axios.post(api.lessonlistall, {
    id: lessonId
  })

  // 成功请求且数据长度不为零 进行格式化
  if (res.code == 0 && res.data) {

    res.data.reverse().map((item1, index1) => {
      item1.label = item1.content
      item1.index = index1 + 1
      item1.first = true
      item1.children = item1.section_map.map((item2, index2) => {
        item2.label = item2.title
        item2.index = index2 + 1
        item2.second = true
        item2.children = item2.keyword_map.map((item3, index3) => {
          item3.label = item3.title
          item3.index = index3 + 1
          item3.third = true
          delete item3.title
          return item3
        })
        delete item2.title
        delete item2.sort
        delete item2.keyword_map
        return item2
      })
      delete item1.content
      delete item1.title
      delete item1.img
      delete item1.sort
      delete item1.status
      delete item1.section_map
      return item1
    })
  }

  console.log(res.data)

  // reactive必须用这个方法进行赋值
  Object.assign(listdata, res.data)

  // 获取第一章第一节第一个知识点对象 用于直接进入学习界面
  firstKeyword = res.data[0]['children'][0]['children'][0]
  firstKeyword.keyLabel = firstKeyword.label
  firstKeyword.keyword_id = firstKeyword.id
  firstKeyword.ctype = 1 // 默认进入视频学习tab
  console.log(firstKeyword);
}

// 树形结构点击节点回调
const handleNodeClick = async (data, node) => {
  // 如果是点击知识点 记录标签、ID、视需要加载课件
  if (data.third) {
    if (!data.children) {
      // 记录知识点label
      keyLabel = data.label
      loadDocument(data, node)
    }
    return
  } else if (data.fourth) {
    console.log(data);
    gotoDocdetail(data)
  }
}

// 跳转课件详情
function gotoDocdetail(data) {
  console.log('gotoDocdetail', data);
  if (data.status == 0) {
    showMessage('error', '该课件暂未发布')
    return
  }
  let routeName = 'Coursedocindex' // 目标路由名称

  // return
  // 新页面打开
  const hrefstr = router.resolve(
    {
      name: routeName,
      query: {
        courseid: lessonId,
        label: data.keyLabel, // 知识点标签 用于设置课件学习页左侧当前树节点
        keyid: data.keyword_id,  // 知识点ID
        source: data.ctype,  // 课件资源的类型
        sourceid: data.id,  // 课件资源的源ID
      }
    }
  ).href
  window.open(hrefstr, '_blank')

}

// 课件类型
const docType = ['no', 'v', 'ppt', 'pdf', 'task', 'test', 'w', 't',]

// 加载课件
async function loadDocument(data, node) {

  let res = await axios.post(api.coursedocumentlist, {
    key_id: data.id
    // key_id: 103
  })

  // 如果课件列表长度等于0 直接返回
  if (res.data.length == 0) { return showMessage('warning', '该知识点暂无更多课件') }

  res.data.map((item, index) => {
    item.label = item.title
    item.fourth = true
    item.index = index
    item.keyLabel = keyLabel
    item[`${docType[item.ctype]}`] = true // 设置课件类型 展示对应图标

    // 删除一些无用属性
    delete item.config
    delete item.content
    delete item.create_time
    delete item.file_extension
    delete item.haveChild
    delete item.keywords
    delete item.page_num
    delete item.period_num
    delete item.section_id
    delete item.tags
    delete item.title
    delete item.user_id
    return item
  });

  let examlist = await axios.post(api.exammylist, {
    uid: uid.value,
    key_id: data.id,
    // status:1
    // ctype: 1, // 1测验 2小测 3考试
  })

  console.log(examlist);
  if (examlist.code == 0 && examlist.data.length != 0) {
    examlist.data.forEach(item => {
      let temobj = {
        label: item.title,
        fourth: true,
        keyLabel: keyLabel,
        keyword_id: data.id,
        test: true,
        status: item.status,
        ctype: 5,
        id: item.id
      }

      res.data.push(temobj)
    });
  }

  console.log('res.data', res.data);

  res.data.forEach(item => {
    eltree.value.append(item, node)
  });

  nextTick(() => {
    // 页面更新完成后 直接展开该节点，但是操作必须是该节点的子节点展开
    // 配合 node-key="label" :current-node-key="currentkey"使用
    eltree.value.setCurrentKey(data.children[0].label, true)

  })

}

// 信息提示
const showMessage = (msgtype, msgstr) => {
  ElMessage({
    showClose: true,
    message: msgstr,
    type: msgtype,
    offset: 50
  })
}

// 模拟树形数据
let data = [
  {
    label: '第一章 电工基础',
    first: true,
    children: [
      {
        second: true,
        label: '1.电路与电工常用公式',
        children: [
          {
            label: '1.1.1电路基本概念',
            w: true
          }
        ]
      },
      {
        second: true,
        label: '2.电气图与识图',
        children: [
          {
            label: '1.2.1电路基本概念',
            ppt: true
          },
          {
            label: '1.2.2电流、电压、电阳及其关系',
            w: true
          },
          {
            label: '1.2.3欧姆定律及其应用',
            v: true
          },
          {
            label: '1.2.4电工与电功率',
            task: true
          }
        ]
      }
    ]
  },
  {
    label: '第二章 电工基础',
    first: true,

    children: [
      {
        second: true,
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        second: true,
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: '第三章',
    first: true,

    children: [
      {
        second: true,
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1'
          }
        ]
      },
      {
        second: true,
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1'
          }
        ]
      }
    ]
  }
]

data = ref(data)

// 定义树形结构的读取属性名
const defaultProps = {
  children: 'children',
  label: 'label'
}
</script>

<style scoped>
.outterbox {
  padding-left: 80px;
  /* padding-bottom: 80px; */
  /* padding-left: var(--el-tree-node-content-height); */
}

.treestyle {
  background-color: #f2f4f7;
}

.custom-node {
  display: flex;
  align-items: center;
  width: 500px;
  height: 50px;
  /* margin: 0 6px; */
}

.iconleft {
  width: 20px;
  color: #4c4c4c;
  margin-right: 5px;
}

.iconright {
  width: 20px;
  color: #4c4c4c;
  margin-left: 5px;
}

.custom-node i {
  /* position: absolute;
  top: 0px;
  left: 0px; */
  display: block;
  /* line-height: 50px; */
  font-family: 'iconfont2' !important;
  font-size: 15px;
  cursor: pointer;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  /* max-width: 600px; */
}

.progressbox {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  width: 140px;
  height: 12px;
  margin-left: 10px;
}

.taskpoint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 55px;
}

.el-progress__text span {
  font-size: 12px !important;
}

.totalprogress {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  height: 30px;
}

.totalprogress .progress {
  width: 140px;
  height: 20px;
  margin-left: 10px;
}
</style>

<style>
:root {
  --tree_itembox_bgcolor: rgb(218 223 229 / 86%);
}

.el-tree {
  /* max-width: 950px !important; */
  max-width: 1500px !important;

}

.el-tree-node {
  position: relative;
}

.el-tree-node__content {
  box-sizing: content-box !important;
  min-height: 50px !important;
  /* background-color: green; */
  background-color: transparent;
  /* background-color: var(--tree_itembox_bgcolor); */
  margin: 6px 0px;
  /* margin: 0px 0px; */
}

.el-tree-node__content:hover {
  /* background-color: #fff; */
  background-color: rgba(0, 183, 255, 0.1);
}

.el-tree-node__content:hover .labelspan {
  color: rgb(0, 119, 255);
}

.el-tree-node__content:hover .bntHoverTips {
  display: block;
}

.el-tree-node__children:hover {
  overflow: visible !important;
}

.el-tree-node__expand-icon {
  position: absolute;
  right: 30px !important;
}

.el-tree-node:focus>.el-tree-node__content {
  /* background-color: var(--tree_itembox_bgcolor) !important; */
  background-color: transparent !important;
  /* background-color: rgba(0, 183, 255, 0.1) !important; */
}

.firstitem .labelspan {
  font-size: 17px;
  font-weight: 700 !important;
}

.custom-node .nopublish {
  color: #d0d5db !important;
}

.firstitem {
  width: 930px !important;
  width: 1500px !important;

  height: 50px;
  padding-left: 17px !important;
  background-color: var(--tree_itembox_bgcolor) !important;
}

.classdocicon {
  margin-left: 30px;
  margin-right: 7px;
}


/*  除章容器别的更加挨近 让其他子节点的外边距为0 */
.el-tree-node__children .el-tree-node__content {
  margin: 0px 0px;
}
</style>

<style>
/* 章灰色序号图标 */
.catalog_num {
  position: relative;
  width: 20px;
  height: 20px;
  padding-left: 14px;
  background: #d0d5db;
  border-radius: 10px;
  margin: 2px 15px 0 0;
}

.catalog_num>span {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  min-width: 16px;
  width: 16px;
  height: 16px;
  padding: 4px;
  /* margin: -2px -4px 0 0; */
  background: #d0d5db;
  display: block;
  border-radius: 20px;
}

.catalog_num>span>i {
  min-width: 12px;
  height: 16px;
  padding: 0 2px;
  line-height: 16px;
  background: #fff;
  font-size: 13px;
  font-family: Arial;
  color: #a8a8b3;
  border-radius: 20px;
  display: block;
  text-align: center;
}

.catalog_num>span>i>em {
  font-style: normal;
}
</style>

<style>
/* 小节橙色序号图标 */
.orangesection {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  /* background-color: #fff; */
  margin-left: 15px;
  margin-right: 10px;
  overflow: visible;
}

.orangecolor {
  background: #ffb04e;
}

.orangesection .orangefont {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 12px;
  width: auto;
  padding: 0 6px;
  height: 22px;
  line-height: 22px;
  /* background: #ffb04e; */
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  box-shadow: none;
}

.bntHoverTips {
  display: none;
  position: absolute;
  top: -44px;
  /* left: -43px; */
  z-index: 99;
  height: 40px;
  line-height: 40px;
  /* width: 110px; */
  text-align: center;
  font-family: Microsoft YaHei;
  font-size: 12px;
  color: #FFF;
  background: rgba(24, 30, 51, 0.80);
  border-radius: 4px;
}

.noover {
  left: -44px;
  width: 110px;
}

.over {
  left: -14px;
  width: 50px;
}

.bntHoverTips i {
  display: block;
  width: 0px;
  height: 0px;
  border: solid rgba(24, 30, 51, 0.80) 4px;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  top: 40px;
  top: auto;
  border-color: rgba(24, 30, 51, 0.80) transparent transparent transparent;
}
</style>
